
<template>
<el-card>
    <my-search v-model="pgData" @search="doSearch">
        <div slot="time"></div>
        <div slot="title"></div>
        <div slot="cx"></div>
        <div class="search_aear">
            <div class="search_aear_bottom">
                <div class="labels">
                    <el-form-item  label="投标人名称">
                        <el-input  v-model="pgData.biddername" placeholder="请输入投标人名称" clearable></el-input>
                    </el-form-item>

                    <el-form-item  label="招标人名称">
                        <el-input  v-model="pgData.tenereename" placeholder="请输入招标人名称" clearable></el-input>
                    </el-form-item>
                    <el-form-item  label="招标代理名称">
                        <el-input  v-model="pgData.agencyname" placeholder="请输入招标代理名称" clearable></el-input>
                    </el-form-item>
                    <el-form-item  label="标段名称">
                        <el-input  v-model="pgData.sectionname" placeholder="请输入标段名称" clearable></el-input>
                    </el-form-item>
                    <el-form-item  label="合作方名称">
                        <el-input  v-model="pgData.partnername" placeholder="请输入合作方名称" clearable></el-input>
                    </el-form-item>
                    <el-form-item  label="订单时间">
                        <el-date-picker
                            v-model="ordertime"
                            type="daterange"
                            value-format="yyyy-MM-dd"
                            format="yyyy-MM-dd"
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期">
                        </el-date-picker> 
                    </el-form-item>
                    <el-form-item  label="开标时间">
                        <el-date-picker
                            v-model="opentime"
                            type="daterange"
                            value-format="yyyy-MM-dd"
                            format="yyyy-MM-dd"
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期">
                        </el-date-picker> 
                    </el-form-item>
                    <el-form-item  label="标段地区">
                        <city-cascader 
                            v-model="pgData.bidAreaCode"  
                            :change-on-select="false" 
                            clearable 
                            city-only 
                            placeholder="请选择地区">
                        </city-cascader>
                    </el-form-item>
                </div>
                <div class="btns">
                    <el-button size="small" type="primary" icon="el-icon-search" @click="doSearch">查询</el-button>
                    <el-button size="small" type="success" icon="el-icon-download" @click="exportList" class="btn_dc">导出</el-button>
                </div>
            </div>
        </div>
    </my-search>
    <my-table :data="tableData" :height="tableHeight" >
        <el-table-column prop="id" label="订单编号" min-width="90" align="center"></el-table-column>
        <el-table-column prop="orderTime" label="订单时间" align="center"></el-table-column>
        <el-table-column prop="orderAmount" label="订单金额(元)" min-width="60" align="center"></el-table-column>
        <el-table-column prop="bidderName" label="投标人名称" min-width="60" align="center"></el-table-column>
        <el-table-column prop="tendereeName" label="招标人名称" min-width="60" align="center"></el-table-column>
        <el-table-column prop="bidAgencyName" label="招标代理名称" align="center"></el-table-column>
        <el-table-column prop="" label="标段信息" min-width="140" >
            <template slot-scope="scope">
                <div>
                    <span>标段编号：{{scope.row.bidSectionNo || '-'}}</span>
                </div>
                <div>
                    <span>标段名称：{{scope.row.bidSectionName || '-'}}</span>
                </div>
                <div>
                    <span>标段预算额：{{scope.row.bidSectionAmount || '-'}}</span>
                </div>
                <div>
                    <span>标段地区：{{scope.row.bidAreaName || '-'}}</span>
                </div>
            </template>
        </el-table-column>
        <el-table-column prop="bidOpenTime" label="开标时间" align="center"></el-table-column>
        <el-table-column prop="partnerName" label="合作方名称" min-width="80" align="center" v-if="false"></el-table-column>
        <el-table-column prop="settStatus" label="结算状态" min-width="50" align="center">
            <template slot-scope="scope">
                <el-tag  size="small" :type ="filterStatus(listStatus,scope.row.settStatus).type">
                    {{filterStatus(listStatus,scope.row.settStatus).value}}
                </el-tag>
            </template>
        </el-table-column>
        <el-table-column prop="" label="操作" min-width="50" align="center">
            <template slot-scope="scope">
                <el-button type="text" @click="listDetail(scope.row)">详情</el-button>
            </template>
        </el-table-column>
    </my-table>

    <my-pagination
        ref="page"
        v-model="tableData"
        :action="$store.getters.orderUrl + '/hcgOrder'"
        :search="pgData"
        :after-query="afterQuery">
    </my-pagination>

</el-card>

</template>

<script>
import COMMON_METHODS from '@mixins/common-methods.js'


export default {
    mixins: [COMMON_METHODS],
    props:[],
    components:{},
    data: function(){
        return{
            pgData:{
                kbstarttime:'',
                kbendtime:'',
                orderstarttime:'',
                orderendtime:'',
            },
            tableData:[],
            tableHeight:window.innerHeight - 245,
            listStatus:[
                {value:'未结算',key:'0',type:'danger'},
                {value:'待确认',key:'1',type:'info'},
                {value:'待开票',key:'2',type:'warning'},
                {value:'待结算',key:'3',type:'primary'},
                {value:'已结算',key:'4',type:'success'},
            ]
        }
    }, 
    computed:{
        opentime:{
            get:function(){
                var startTime = this.pgData.kbstarttime || '';
                var endtime = this.pgData.kbendtime || '';
                    if(startTime && endtime){
                        return[
                            startTime,
                            endtime
                        ];
                    }else{
                        return[]
                    }
            },
            set:function(val){
                if(!val){
                    this.pgData.kbstarttime = '' ;
                    this.pgData.kbendtime = '';
                }else{
                    var startTime = val[0] || '';
                    var endtime = val[1] || '';
                    this.pgData.kbstarttime = startTime;
                    this.pgData.kbendtime = endtime;
                }
            },
        },
        ordertime:{
            get:function(){
                var startTime = this.pgData.orderstarttime || '';
                var endtime = this.pgData.orderendtime || '';
                    if(startTime && endtime){
                        return[
                            startTime,
                            endtime
                        ];
                    }else{
                        return[]
                    }
            },
            set:function(val){
                if(!val){
                    this.pgData.orderstarttime = '' ;
                    this.pgData.orderendtime = '';
                }else{
                    // var startTime = val[0] || '';
                    // var endtime = val[1] || '';
                    var startTime = val[0] + ' ' + '00:00:00';
                    var endtime = val[1] + ' ' + '23:59:59';
                    this.pgData.orderstarttime = startTime;
                    this.pgData.orderendtime = endtime;
                }
            },
        }
    },
    watch:{
  
    },

    methods: {
        doSearch:function(){
            this.$refs.page.queryData();
        },
        //详情
        listDetail:function(row){
            if(this.getQuery('token')){
                this.goto({
                    path: './detail',
                    query: {
                        rowguid: row.id,
                        token:this.getQuery('token')
                    }
                })
            }else{
                this.goto({
                    path: './detail',
                    query: {
                        rowguid: row.id
                    }
                }) 
            }
        },
        //导出
        exportList:function(){
            var search = toSearch({
                kbstarttime:this.pgData.kbstarttime,
                kbendtime:this.pgData.kbendtime,
                orderstarttime:this.pgData.orderstarttime,
                orderendtime:this.pgData.orderendtime,
                biddername:this.pgData.biddername,
                tenereename:this.pgData.tenereename,
                agencyname:this.pgData.agencyname,
                sectionname:this.pgData.sectionname,
                partnername:this.pgData.partnername,
                isExport: true,
                token:this.getQuery('token') ? this.getQuery('token') : this.getGetters('user').token
            });
                window.open('/bhtong/ordermg/hcgOrder' + search);
        },
        afterQuery:function(){
            this.tableHeight = (window.innerHeight - 245);
        },
        
    },
    mounted() {

    }
}
</script>

<style scoped lang="scss">
.search_aear_top{
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
}
.search_aear_bottom{
    display: flex;
    justify-content: space-between;
    .btns{
        text-align: right;
        .btn_dc{
            margin-top: 8px;
        }
    }
}
::v-deep .el-table th > .cell {

    text-align: center;
}

</style>
